<template>
	<m-layout barBg="unset" gap="0" :scrollTop="scrollTop" :title="title" color="#ffffff" scrollColor="#0f0b3b"
		:style="topStyle">
		<text slot="right" style="font-size: 28rpx;color: #FFF;" @click="goDetail()" v-if="compyInfo.state=='1'||compyInfo.state=='3'||compyInfo.state=='4'">编辑</text>
		<m-block class="compyInfo" radius="0" bgColor="unset" gap="30 44 120 24">
			<view class="flex ai-flex-start">
				<view class="flex-column ml-20 flex-1 text-white">
					<text class="fs42 fw-600 otp2 ">{{compyInfo.compyname}}</text>
					<!-- 	<text>{{compyInfo.content}}</text> -->
					<view class="mt-20 text-light">
				<!-- 		<view class="fs24 flex" v-if="compyInfo.invcode">
							<m-icon size="32" spa="0 10 0 0" color="#FFF" type="icon-tubiao_lianmeng-yaoqingma" />
							<text>公司邀请码：</text>
							<view class="">
								<text class="fs26 fw-600">{{compyInfo.invcode}}</text>
								<m-icon size="36" spa="0 0 0 10" color="#FFF" type="icon-fuzhi"
									@click="doCopy(compyInfo.invcode)" />
							</view>
						</view> -->
						<view class="flex fs24 mt-12">
							<m-icon size="32" spa="0 10 0 0" color="#FFF" type="icon-renyuanbangding" />
							<text>公司发起人账号：</text>
							<text class="fs26 fw-600">{{compyInfo.username}}</text>
						</view>
						<view class="flex fs24 mt-12">
							<m-icon size="32" spa="0 10 0 0" color="#FFF" type="icon-renyuanbangding" />
							<text>公司法人：</text>
							<text class="fs26 fw-600">{{compyInfo.truename}}</text>
						</view>
						<view class="flex-column fs21 mt-12">
							<view class="flex">
								<text>状态：</text>
								<text v-if="compyInfo.state=='1'">已通过</text>
								<text class="text-red" v-if="compyInfo.state=='2'">无效</text>
								<text class="text-red" v-if="compyInfo.state=='3'">待审核</text>
								<text class="text-red" v-if="compyInfo.state=='4'">驳回</text>
								<text v-if="compyInfo.state=='4'">{{compyInfo.backcontent}}</text>
							</view>
						</view>
						<view class="flex-between fs21 mt-16">
							<view class="flex">
								<text>直推公司业绩：</text>
								<text>{{compyInfo.total}}</text>
							</view>
							<view class="flex">
								<text>间推公司业绩：</text>
								<text>{{compyInfo.total_jt}}</text>
							</view>
						</view>
					</view>
				</view>
				<m-block bgColor="#fff" radius="300" gap="6">
					<m-image2 v-if="compyInfo.picurl" :size="[140,140]" :src="compyInfo.picurl.split(',')[0]"
						radius="120" />
				</m-block>
			</view>
		</m-block>
		<m-block class="content flex-column" radius="30" gap="24 0" bgColor="rgba(246, 246, 246, 1)">
			<view class="mb-16 flex-between plr-28">
				<view class="listTitle flex">
					<text class="before"></text>
					<text class="fs26 fw-600">成员列表</text>
				</view>
				<text class="fs26 fw-600">共{{compyInfo['totalCount']}}人</text>
			</view>
			<m-block gap="24 30" spa="10 0 10" bgColor="#fff" v-for="(item,index) in listArr" class="listBox"
				:key="index">
				<view class="fs24 flex-between ai-flex-start">
					<view class="flex-column">
						<view class="">
							<m-icon size="36" spa="0 10 0 0" color="#333" type="icon-lujing" />
							<text class="fs30 fw-600">{{item.phone}}</text>
						</view>
						<text class="fs21 text-grey mt-12">注册时间：{{item.ctime.replace('T'," ")}}</text>
						<text class="fs21 text-grey mt-12">姓名：{{item.truename}}</text>
					</view>
					<text class="fs24 tag"
						:class="[item.userid==compyInfo.userid?'tag22':'']">{{item.userid==compyInfo.userid?'公司发起人':'公司合伙人'}}</text>
				</view>
				<view class="fs24 mt-16">
					<m-block bgColor="#eeedfa" gap="16" spa="12 0">
						<view class="flex">
							<text class="fs24 fw-600">个人业绩：</text>
							<text>{{item.userteamtotal.selfamount}}</text>
						</view>
						<view class="flex">
							<text class="fs24 fw-600">伞下业绩：</text>
							<text>{{item.userteamtotal.teamamount}}</text>
						</view>
						<view class="flex">
							<text class="fs24 fw-600">直推业绩：</text>
							<text>{{item.userteamtotal.totalzt}}</text>
						</view>
						<view class="flex">
							<text class="fs24 fw-600">间推业绩：</text>
							<text>{{item.userteamtotal.totaljt}}</text>
						</view>
					</m-block>
				</view>
				<view class="fs24 mt-16" v-if="item.compyname">
					<m-block bgColor="#eeedfa" gap="16" spa="12 0">
						<view class="flex">
							<text class="fs24 fw-600">公司名称：</text>
							<text>{{item.compyname}}</text>
						</view>
						<view class="flex">
							<text class="fs24 fw-600">直推公司业绩：</text>
							<text>{{item.total}}</text>
						</view>
						<view class="flex">
							<text class="fs24 fw-600">间推公司业绩：</text>
							<text>{{item.total_jt}}</text>
						</view>
					</m-block>
				</view>
			</m-block>
		</m-block>
	</m-layout>
</template>

<script>
	import { mapState, mapActions } from 'vuex';
	import { hhrpageFromCompy } from '@/api/Users.js';
	export default {
		name: 'compyDetail',
		data() {
			return {
				scrollTop: 0,
				compyid: 0,
				pageIndex: 1, // 当前页数
				pageSize: 10,
				pageCount: 1, // 列表总页数（用于加载更多）
				listArr: [], // 主列表
				isLoading: false,
				compyInfo: {},
				topStyle: '',
				title: ''
			}
		},
		onLoad({ compyid }) {
			this.compyid = compyid;
		},
		onShow() {
			this.initData();
		},
		onPullDownRefresh() {
			this.initData();
		},
		onReachBottom() {
			if (this.pageIndex < this.pageCount) {
				this.pageIndex += 1;
				this.getList();
			}
		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
			if (scrollTop > 80) {
				this.title = this.compyInfo.compyname || ''
			} else {
				this.title = ''
			}
		},
		methods: {
			goDetail() {
				this.$store.commit('user/SET_COMPANYINFO', this.compyInfo);
				this.Jump(`/pages/mine/openCompany/openCompany?compyid=${this.compyid}`)
			},
			///////////////////////////////////// 初始化 ////////////////////////////////////////
			initData() {
				this.isEditor = false;
				this.pageIndex = 1;
				this.pageSize = 10;
				this.pageCount = 1;
				this.listArr = [];
				this.getList();
			},
			///////////////////////////////////// 网络请求 ////////////////////////////////////////
			// 获取主列表
			async getList() {
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				const { list, pageCount, data, totalCount } = await hhrpageFromCompy({
					compyid: this.compyid,
					pageSize: this.pageSize,
					pageIndex: this.pageIndex,
				});
				if (this.pageIndex == 1) {
					this.compyInfo = data;
					this.compyInfo['totalCount'] = totalCount;
					this.topStyle =
						`background:linear-gradient(89deg, rgba(15, 11, 59, 1) 0%, rgba(54,47,130,0.69) 100%), url("${data.picurl.split(',')[0]}");background-repeat: no-repeat;background-size: 100% 470rpx;`
				}
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
			onPullDownRefresh() {
				this.initData();
			},
			onReachBottom() {
				this.getList();
				console.log('触底了');
			}
		}
	}
</script>

<style lang="scss">
	.layout {
		// background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../../static/start/logo.png");
		// background-repeat: no-repeat;
		// background-size: 100% 400rpx;
	}

	.content {
		padding: 24rpx;
	}

	.compyInfo {
		box-sizing: border-box;
		/* #ifdef H5 */
		height: 300rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: 280rpx;
		/* #endif */
		
	}

	.listBox {
		position: relative;
	}

	.tag {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		padding: 12rpx 32rpx;
		color: #FFFFFF;
		background-color: #786BFF;
		font-size: 21rpx;
		border-radius: 0rpx 20rpx 0rpx 24rpx;
		position: absolute;
	}

	.listTitle {
		&>.before {
			margin-right: 16rpx;
			width: 8rpx;
			height: 36rpx;
			background: #786BFF;
			border-radius: 0px 0px 0px 0px;
		}
	}

	.tag {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		padding: 12rpx 32rpx;
		color: #FFFFFF;
		background-color: #786BFF;
		font-size: 21rpx;
		border-radius: 0rpx 20rpx 0rpx 24rpx;
		position: absolute;
	}

	.tag22 {
		background-color: #826a4a;
	}
</style>